<template>
  <div class="com-container">
    <div class="com-chart" ref="hot_ref"></div>
    <div class="pos-right" @click="addClick()">
      <i class="iconfont icon-jiantou_liebiaoxiangyou"></i>
    </div>
    <div class="pos-left" @click="addClick()">
      <i class="iconfont icon-jiantou_liebiaoxiangzuo"></i>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {
      chartInstance: null,
      sellerData: [],
      totalPage: '',
      curetPage: 1,
      timerId: '',
      currentIndex: 0,
      endValue: 9,
      titleFontSize: null,
    }
  },
  computed: {
    ...mapState(['theme']),
  },
  watch: {
    theme() {
      this.chartInstance.dispose()
      this.initSellerData()
      this.screenAdapter()
      this.upDataCharts()
    },
  },
  created() {
    this.$socket.registerCallBack('hotproductData', this.getData)
  },
  destroyed() {
    this.$socket.unRegisterCallBack('hotproductData')
  },
  mounted() {
    this.initSellerData()
    this.$socket.send({
      action: 'getData',
      socketType: 'hotproductData',
      chartName: 'hotproduct',
      value: '',
    })

    window.addEventListener('resize', this.screenAdapter)

    this.screenAdapter()
    // this.getSellerData()
  },
  destroyed() {
    clearInterval(this.timerId)
    window.removeEventListener('resize', this.screenAdapter)
  },
  methods: {
    initSellerData() {
      this.titleFontSize = (this.$refs.hot_ref.offsetWidth / 100) * 3.6
      this.chartInstance = this.$chart.init(this.$refs.hot_ref, this.theme)
      let options = {
        title: {
          text: '▎热销商品占比',
          left: 20,
          top: 20,
        },
        color: ['#0BA82C', '#4FF778', '#2E72BF', '#23E5E5', '#5052EE', '#AB6EE5'],
        grid: {
          top: '20%',
          left: '3%',
          right: '6%',
          bottom: '3%',
          containLabel: true,
        },
        legend: {
          top: '15%',
          // 图标类型 圆形
          icon: 'circle',
        },
        tooltip: {
          show: true,
          // formatter: arg => {
          //   const thirdCategory = arg.data.children
          //   // 计算所有三级分类的数值总和，才能计算出百分比
          //   let total = 0
          //   thirdCategory.forEach(item => {
          //     total += item.value
          //   })
          //   // 显示的文本
          //   let showStr = ''
          //   thirdCategory.forEach(item => {
          //     showStr += `${item.name}：${_.round((item.value / total) * 100, 2)}% <br/>`
          //   })
          //   return showStr
          // },
        },
        series: [
          {
            type: 'pie',
            radius: this.titleFontSize * 4.5,
            // 控制饼图的位置 x,y
            center: ['50%', '60%'],
            label: {
              show: true,
              formatter: `{b}{d}%`,
            },
            // 高亮状态下的样式
            emphasis: {
              labelLine: {
                // 连接文字的线条
                show: true,
              },
            },
          },
        ],
      }

      this.chartInstance.setOption(options)
    },
    upDataCharts() {
      const DateArrName = this.sellerData[this.currentIndex].children.map(item => item.name)
      const seriesDataArr = this.sellerData[this.currentIndex].children.map(item => {
        return {
          name: item.name,
          value: item.value,
          children: item.children,
        }
      })
      const dataOption = {
        legend: {
          data: DateArrName,
        },
        series: [
          {
            data: seriesDataArr,
          },
        ],
      }
      this.chartInstance.setOption(dataOption)
    },
    async getData(ret) {
      // let res = await this.$axios.get('hotproduct.json')
      // this.sellerData = res.data
      this.sellerData = JSON.parse(ret)
      this.upDataCharts()
    },
    addClick() {
      console.log('切换')
      setTimeout(() => {
        console.log(this.currentIndex)
        if (this.currentIndex > this.sellerData.length - 1) {
          this.currentIndex = 0
          this.upDataCharts()
        } else {
          this.currentIndex++
          this.upDataCharts()
        }
      }, 200)
    },
    screenAdapter() {
      const titleFontSize = (this.$refs.hot_ref.offsetWidth / 100) * 3.6
      console.log(titleFontSize)
      // 和分辨率大小相关的配置项
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: titleFontSize,
          },
        },
        tooltip: {
          axisPointer: {
            lineStyle: {
              width: titleFontSize,
            },
          },
        },
      }
      this.chartInstance.setOption(adapterOption)
      // 手动的调用图表对象的resize 才能产生效果
      this.chartInstance.resize()
    },
  },
}
</script>

<style lang="less" scoped>
.pos-right {
  position: absolute;
  right: 10%;
  top: 50%;
  font-size: 40px;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
}
.iconfont {
  font-size: 30px;
}
.pos-left {
  position: absolute;
  left: 10%;
  top: 50%;
  font-size: 40px;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
}
</style>
